<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色查询功能测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        h1, h2 {
            color: #333;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: inline-block;
            width: 120px;
            font-weight: bold;
        }
        input, select, textarea {
            width: 300px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        button {
            background-color: #409eff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
            font-size: 14px;
        }
        button:hover {
            background-color: #337ecc;
        }
        .result {
            margin-top: 15px;
            padding: 10px;
            border-radius: 4px;
            white-space: pre-wrap;
            font-family: monospace;
            font-size: 12px;
        }
        .success {
            background-color: #f0f9ff;
            border: 1px solid #b3d8ff;
            color: #0066cc;
        }
        .error {
            background-color: #fef0f0;
            border: 1px solid #fbc4c4;
            color: #cc0000;
        }
        .warning {
            background-color: #fdf6ec;
            border: 1px solid #f5dab1;
            color: #e6a23c;
        }
        .role-list {
            max-height: 400px;
            overflow-y: auto;
            border: 1px solid #ddd;
            padding: 10px;
            background-color: #fafafa;
        }
        .role-item {
            padding: 8px;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
        }
        .role-item:last-child {
            border-bottom: none;
        }
        .role-info {
            flex: 1;
        }
        .role-name {
            font-weight: bold;
            color: #333;
        }
        .role-meta {
            font-size: 12px;
            color: #666;
            margin-top: 4px;
        }
        .status-badge {
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            margin-left: 10px;
        }
        .status-active {
            background-color: #67c23a;
            color: white;
        }
        .status-inactive {
            background-color: #f56c6c;
            color: white;
        }
    </style>
</head>
<body>
    <h1>角色查询功能测试</h1>
    
    <div class="container">
        <h2>1. 角色查询测试</h2>
        <div class="form-group">
            <label>角色名称:</label>
            <input type="text" id="roleName" placeholder="请输入角色名称关键词">
        </div>
        <div class="form-group">
            <label>角色描述:</label>
            <input type="text" id="roleDescription" placeholder="请输入角色描述关键词">
        </div>
        <div class="form-group">
            <label>角色状态:</label>
            <select id="roleStatus">
                <option value="">请选择状态</option>
                <option value="active">启用</option>
                <option value="inactive">禁用</option>
            </select>
        </div>
        <div class="form-group">
            <label>页码:</label>
            <input type="number" id="pageIndex" value="1" min="1">
        </div>
        <div class="form-group">
            <label>页大小:</label>
            <input type="number" id="pageSize" value="10" min="1" max="100">
        </div>
        <button onclick="queryRoles()">查询角色</button>
        <button onclick="resetQuery()">重置查询</button>
        <div id="queryResult" class="result"></div>
    </div>

    <div class="container">
        <h2>2. 角色列表</h2>
        <div id="roleList" class="role-list"></div>
    </div>

    <div class="container">
        <h2>3. 快速查询测试</h2>
        <button onclick="queryByName()">按名称查询（管理员）</button>
        <button onclick="queryByDescription()">按描述查询（管理）</button>
        <button onclick="queryByStatus()">按状态查询（启用）</button>
        <button onclick="queryCombined()">组合查询（管理员+启用）</button>
    </div>

    <script>
        const API_BASE_URL = 'http://localhost:5095/api';
        let roles = [];

        async function queryRoles() {
            try {
                const params = new URLSearchParams();
                
                const roleName = document.getElementById('roleName').value.trim();
                const roleDescription = document.getElementById('roleDescription').value.trim();
                const roleStatus = document.getElementById('roleStatus').value;
                const pageIndex = document.getElementById('pageIndex').value;
                const pageSize = document.getElementById('pageSize').value;

                if (roleName) params.append('name', roleName);
                if (roleDescription) params.append('description', roleDescription);
                if (roleStatus) params.append('status', roleStatus);
                params.append('pageIndex', pageIndex);
                params.append('pageSize', pageSize);

                const response = await fetch(`${API_BASE_URL}/roles?${params.toString()}`);
                const result = await response.json();
                
                if (result.success) {
                    roles = result.data.roles || [];
                    displayRoles();
                    showResult('queryResult', `查询成功，共找到 ${result.data.totalCount} 个角色，当前显示 ${roles.length} 个`, 'success');
                } else {
                    showResult('queryResult', `查询失败: ${result.message}`, 'error');
                }
            } catch (error) {
                showResult('queryResult', `请求失败: ${error.message}`, 'error');
            }
        }

        function displayRoles() {
            const container = document.getElementById('roleList');
            container.innerHTML = '';
            
            if (roles.length === 0) {
                container.innerHTML = '<div style="text-align: center; color: #666; padding: 20px;">暂无角色数据</div>';
                return;
            }
            
            roles.forEach(role => {
                const roleDiv = document.createElement('div');
                roleDiv.className = 'role-item';
                roleDiv.innerHTML = `
                    <div class="role-info">
                        <div class="role-name">
                            ${role.name}
                            <span class="status-badge ${role.status === 'active' ? 'status-active' : 'status-inactive'}">
                                ${role.status === 'active' ? '启用' : '禁用'}
                            </span>
                        </div>
                        <div class="role-meta">
                            描述: ${role.description || '无'} | 
                            用户数: ${role.userCount || 0} | 
                            权限数: ${role.menus ? role.menus.length : 0} | 
                            创建时间: ${formatDateTime(role.createdAt)}
                        </div>
                    </div>
                `;
                container.appendChild(roleDiv);
            });
        }

        function resetQuery() {
            document.getElementById('roleName').value = '';
            document.getElementById('roleDescription').value = '';
            document.getElementById('roleStatus').value = '';
            document.getElementById('pageIndex').value = '1';
            document.getElementById('pageSize').value = '10';
            document.getElementById('queryResult').textContent = '';
            document.getElementById('roleList').innerHTML = '';
        }

        async function queryByName() {
            document.getElementById('roleName').value = '管理员';
            document.getElementById('roleDescription').value = '';
            document.getElementById('roleStatus').value = '';
            await queryRoles();
        }

        async function queryByDescription() {
            document.getElementById('roleName').value = '';
            document.getElementById('roleDescription').value = '管理';
            document.getElementById('roleStatus').value = '';
            await queryRoles();
        }

        async function queryByStatus() {
            document.getElementById('roleName').value = '';
            document.getElementById('roleDescription').value = '';
            document.getElementById('roleStatus').value = 'active';
            await queryRoles();
        }

        async function queryCombined() {
            document.getElementById('roleName').value = '管理员';
            document.getElementById('roleDescription').value = '';
            document.getElementById('roleStatus').value = 'active';
            await queryRoles();
        }

        function formatDateTime(dateTime) {
            if (!dateTime) return '';
            return new Date(dateTime).toLocaleString('zh-CN');
        }

        function showResult(elementId, message, type) {
            const element = document.getElementById(elementId);
            element.textContent = message;
            element.className = `result ${type}`;
        }

        // 页面加载时自动查询
        window.onload = function() {
            queryRoles();
        };
    </script>
</body>
</html> 
        async function queryByName() {
            document.getElementById('roleName').value = '管理员';
            document.getElementById('roleDescription').value = '';
            document.getElementById('roleStatus').value = '';
            await queryRoles();
        }

        async function queryByDescription() {
            document.getElementById('roleName').value = '';
            document.getElementById('roleDescription').value = '管理';
            document.getElementById('roleStatus').value = '';
            await queryRoles();
        }

        async function queryByStatus() {
            document.getElementById('roleName').value = '';
            document.getElementById('roleDescription').value = '';
            document.getElementById('roleStatus').value = 'active';
            await queryRoles();
        }

        async function queryCombined() {
            document.getElementById('roleName').value = '管理员';
            document.getElementById('roleDescription').value = '';
            document.getElementById('roleStatus').value = 'active';
            await queryRoles();
        }

        function formatDateTime(dateTime) {
            if (!dateTime) return '';
            return new Date(dateTime).toLocaleString('zh-CN');
        }

        function showResult(elementId, message, type) {
            const element = document.getElementById(elementId);
            element.textContent = message;
            element.className = `result ${type}`;
        }

        // 页面加载时自动查询
        window.onload = function() {
            queryRoles();
        };
    </script>
</body>
</html> 